<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        .box {
            width: 1000px;
            margin: 10px auto;
        }

        nav {
            width: 100%;
            height: 40px;
            line-height: 40px;
            border-radius: 5px;
            background-color: #6959cc;
            color: #fff;
            font-size: 13px;
            display: flex;
        }

        nav div {
            margin-left: 25px;
            cursor: pointer;
            position: relative;
        }

        .active::before {
            content: "";
            width: 30px;
            height: 2px;
            background-color: red;
            position: absolute;
            bottom: 2px;
            left: 50%;
            margin-left: -15px;
            border-radius: 10px;
        }

        .heorList {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }

        .heorList>div {
            margin-top: 10px;
            font-size: 14px;
            text-align: center;
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    class App extends React.Component {
        state = {
            navList: [
                {
                    name: "全部",
                    type: "all",
                }, {
                    name: "法师",
                    type: "mage"
                }, {
                    name: "战士",
                    type: "fighter"
                }, {
                    name: "坦克",
                    type: "tank"
                }, {
                    name: "刺客",
                    type: "assassin"
                }, {
                    name: "射手",
                    type: "marksman"
                }, {
                    name: "辅助",
                    type: "support"
                }
            ],
            activeIndex: 0,
            // 所有英雄
            horeList: [],
            // 满足条件的英雄
            list: []
        }
        render() {
            let { navList, activeIndex, list } = this.state;
            return (
                <div className='box'>
                    <nav>
                        {
                            navList.map((item, index) => {
                                return <div key={index} className={activeIndex === index ? 'active' : ''} onClick={() => this.changeIndex(index)}>{item.name}</div>
                            })
                        }
                    </nav>
                    <div className='heorList'>
                        {
                            list.map((item, index) => {
                                return (
                                    <Hero key={index} item={item} />
                                )
                            })
                        }
                    </div>
                </div>
            )
        }
        changeIndex(index) {
            // 根据当前点击的nav索引获取英雄类型
            let type = this.state.navList[index].type;
            if (type === 'all') {
                this.setState({
                    activeIndex: index,
                    list: this.state.horeList
                })
                return
            }
            console.log(type)
            // 根据当前类型过滤满足条件的英雄
            let list = this.state.horeList.filter(item => {
                return item.roles.includes(type)
            })
            console.log(list)
            this.setState({
                activeIndex: index,
                list: list
            })
        }
        componentDidMount() {
            console.log("组件渲染后")
            // 发送请求获取英雄列表
            let xhr = new XMLHttpRequest();
            xhr.open("get", "https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js");
            xhr.send();
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    let res = JSON.parse(xhr.response);
                    console.log(res)
                    this.setState({
                        horeList: res.hero,
                        list:res.hero
                    })
                }
            }
        }
    }

    class Hero extends React.Component {
        render() {
            return (
                <div>
                    <img src={`https://game.gtimg.cn/images/lol/act/img/champion/${this.props.item.alias}.png`} alt="" />
                    <div>{this.props.item.name}</div>
                </div>
            )
        }
    }

    ReactDOM.render(<App />, document.getElementById("root"))


    let arry = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    // filter 过滤数组 将满足条件的元素返回到一个新数组中
    let newArry = arry.filter(item => {
        return item > 5
    })
    console.log(newArry)
    // includes 数组中是否包含某个元素 若包含返回true 若不包含返回false
    console.log(arry.includes(10))
</script>

</html>